<!-- echartscom.vue -->
<template>
  <div class="charttest">
    <div :style="echartsStyles" :id="echarts" class="echarts" ref="echarts"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'echartscom',
    props: {
        chartData: {
            type: Array,
            default: () => []
        },
        legendData: {
            type: Array,
            default: () => []
        },
        title: String,
        optionTitle: String,
        echartsStyles: {
            type: Object,
            default: () => {}
        },
        clickParam: {
            type: Object,
            default: () => {}
        },
        chartType: {
            type: String,
            default: () => ''
        },
        isClick: Number
    },
    data() {
        return {
            parms: this.clickParam,
            isEmpty: true
        }
    },
    methods: {
        drawCharts() {
            var myChart = echarts.init(document.getElementById(this.echarts))
            const that = this
            const chartDatas = this.chartData
            const chartType = this.chartType
            console.log('chartType', chartType)
            myChart.setOption({
                title: {
                    text: this.optionTitle,
                    left: '0px',

                    textStyle: {
                        fontSize: 16,

                        fontWeight: 'normal'
                    }
                },

                tooltip: {
                    trigger: 'item',
                    formatter: function(parmars) {
                        var str = chartType == 'time' ? '小时 ' : ''
                        return parmars.name + ': ' + parmars.value + str + ' 占比:' + parmars.percent + '%'
                    }
                },
                legend: {
                    right: 0,
                    top: 40,
                    itemHeight: 14,
                    itemGap: 9,
                    pageIconSize: 10,
                    type: 'scroll',
                    formatter: function(name) {
                        var data = chartDatas
                        var total = 0
                        var tarValue
                        for (var i = 0; i < data.length; i++) {
                            total += data[i].value
                            if (data[i].name == name) {
                                tarValue = data[i].value
                            }
                        }
                        var v = tarValue
                        var p = Math.round((tarValue / total) * 100)
                        var isnan = isNaN(p)
                        if (isnan) {
                            p = 0
                        }
                        if (name.length > 8) {
                            name = name.slice(0, 8) + '...'
                        }
                        if (chartType == 'time') {
                            if (v) {
                                return `${name} : ${v}小时 ` + `占比 :(${p}%)`
                            } else {
                                return `${name} : ${v} ` + `占比 :(${p}%)`
                            }
                        } else {
                            return `${name} : ${v} ` + `占比 :(${p}%)`
                        }
                    },
                    tooltip: {
                        show: true
                    },
                    data: this.initTransData(),
                    pagemode: true
                },
                series: [
                    {
                        name: this.title,
                        type: 'pie',
                        radius: '50%',
                        center: ['50%', '50%'],
                        avoidLabelOverlap: true,
                        formatter: '{c}: {d}',
                        label: {
                            normal: {
                                show: true,
                                position: 'outer',
                                color: 'black',
                                // formatter(params) {
                                //     // if (chartType == 'time') {
                                //     //     if (v) {
                                //     //         v = v % 60
                                //     //         return `${name} : ${v}小时 ` + `占比:(${p}%)`
                                //     //     } else {
                                //     //         return `${name} : ${v}` + `占比:(${p}%)`
                                //     //     }
                                //     // } else {
                                //     //     return `${name} : ${v}` + `占比:(${p}%)`
                                //     // }
                                //     return params.name.length < 8 ? params.name : `${params.name.slice(0, 8)}\n${params.name.slice(8)}`
                                // }
                                formatter: function(parmars) {
                                    var str = chartType == 'time' ? '小时 ' : ' '
                                    return parmars.name + ': ' + parmars.value + str + ' 占比:' + parmars.percent + '%'
                                }
                            },
                            emphasis: {
                                show: true,

                                fontSize: '15',
                                fontWeight: 'bold'
                            }
                        },
                        // itemStyle: {
                        //   normal: {
                        //     color: function() {
                        //       return (
                        //         "#" +
                        //         Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(
                        //           16
                        //         )
                        //       );
                        //     }
                        //   }
                        // },

                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        data: this.chartData
                    }
                ]
            })
            myChart.on('click', function(param) {
                const params = param.data

                that.parms = params
                that.transParams(params)
            })
        },
        transParams(params) {
            console.log('params', params)
            // if (params.type != 7) {
            this.$emit('changeParms', params, this.isClick)
            // }
        },
        initTransData() {
            return this.chartData
        }
    },
    computed: {
        echarts() {
            return 'echarts' + Math.random() * 100000
        }
    },
    watch: {
    // 观察option的变化

        chartData: {
            handler() {
                this.drawCharts()
            },

            deep: true // 对象内部属性的监听，关键。
        }
    },
    mounted() {
        this.drawCharts()
    },
    destroy() {
        if (this.echarts) {
            this.echarts.dispose()
            this.echarts = null
        }
    },
    components: {}
}
</script>

<style></style>
